<template>
  <div class="scoreDisplay">
    <aside>
      <section>
        <span>选课总人数：</span>
        <article>{{ selectedStuNum }}</article>
      </section>
      <section>
        <span>已录入人数：</span>
        <article>{{ data.hasScoreNum }}</article>
      </section>
      <section>
        <span>达平均分人数：</span>
        <article>{{ data.overAveNum }}</article>
      </section>
      <section>
        <span>最高分：</span>
        <article>{{ data.maxScore }}</article>
      </section>
      <section>
        <span>最低分：</span>
        <article>{{ data.minScore }}</article>
      </section>
    </aside>
    <main>
      <span>平均分：</span>
      <article>{{ data.aveScore ? data.aveScore.toFixed(2) : '' }}</article>
    </main>
  </div>
</template>

<script setup lang="ts">
import { IScoreAnalyseByTch } from '../../../../../../type/index';

interface IProps {
  data: IScoreAnalyseByTch;
  selectedStuNum: number;
}

const props = defineProps<IProps>();
// const displayData = ref<IScoreAnalyseByTch>(props.data);

// watch(props, newValue => {
//   displayData.value = newValue.data;
// });
</script>

<style lang="scss" scoped>
.scoreDisplay {
  padding: 0 16px;
  display: flex;
  justify-content: space-between;
  aside {
    width: 50%;
    // border: 2px solid red;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    section {
      color: var(--font-color);
      // border: 2px solid blue;
      span {
        font-size: 16px;
      }

      article {
        display: inline;
        font-size: 18px;
      }
    }
  }
  main {
    width: 38%;
    color: var(--font-color);
    display: flex;
    flex-direction: column;
    justify-content: center;
    // border: 2px solid orange;

    article {
      // border: 2px solid blue;
      font-size: 48px;
      font-weight: bold;
    }
  }
}
</style>
